import { Tabs } from 'antd'
import DangerousInnerHTML from './dangerousHtml'
import Scu from './scu'
import CreatePortal from './createPortal'
import RenderProps from './renderProps'
import Hoc from './hoc'
import Controlled from './controlled'
import Key from './key'

export default function Home() {
    const items = [
        {
            key: '1',
            label: '富文本',
            children: <DangerousInnerHTML />
        },
        {
            key: '2',
            label: '性能优化 SCU',
            children: <Scu />
        },
        {
            key: '3',
            label: 'CreatePortal',
            children: <CreatePortal />
        },
        {
            key: '4',
            label: '渲染属性',
            children: <RenderProps />
        },
        {
            key: '5',
            label: '高阶组件',
            children: <Hoc />
        },
        {
            key: '6',
            label: '受控组件',
            children: <Controlled />
        },
        {
            key: '7',
            label: 'Key',
            children: <Key />
        }

    ]
    return (
        <Tabs items={items} size="large" type="card"/>
    )
}
